index.miss-use.spec.tsx ➔ Component - Code Metrics - askirmas/react-classnaming - Measure and Improve Code Quality continuously with Scrutinizer

index.miss-use.spec.tsx ➔ Component A
last analyzed 2021-03-19 15:57 UTC

↳ Parent: __tests__/index.miss-use.spec.tsx

Complexity

Conditions

Size

Total Lines	7
Code Lines	7

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	7
dl	0
loc	7
rs	10
c	0
b	0
f	0
cc	1

import React from "react"
import type { ClassNames, ClassNamesProperty, ClassHash } from "../src/"
import classNaming from "../src/"
import expectRender from "../expect-to-same-render"

const {classnames}: ClassNames<typeof App> = {
  classnames: {
    "App__Item": "hash",
    class1: "hash1",
    class2: "hash2"
  }
}

function App({classnames, className}: ClassNames<
  true,
  ClassNamesProperty<{App__Item: ClassHash}>,
  typeof Component
  >) {
  return <Component {...{
    ...classNaming({
      classnames, className
    })(
      true, {App__Item: true}
    ),
    classnames
  }}/>
}

function Component(props: ClassNames<true, ClassNamesProperty<{class1: ClassHash, class2: ClassHash}>>) {
  const classes = classNaming(props)
  return <>
    <div {...classes(true, {class1: true, class2: false})}/>
    <div {...classes({class2: true})}/>
  </>
}

it("not propagate classnames", () => {
  const App = ({classnames, className}: ClassNames<
    true,
    ClassNamesProperty<{App__Item: ClassHash}>,
    typeof Component>
  ) =>
    //@ts-expect-error Types of property classnames are incompatible Type undefined is not assignable
    <Component {
      ...classNaming({
        classnames, className
      })(
        true, {App__Item: true}
      )}
    />

  expectRender(
    <App className="MyApp" classnames={classnames}/>
  ).toSame(
    <div className="MyApp hash class1" />,
    <div className="class2" />
  )
})


1			import React from "react"
2			import type { ClassNames, ClassNamesProperty, ClassHash } from "../src/"
3			import classNaming from "../src/"
4			import expectRender from "../expect-to-same-render"
5
6			const {classnames}: ClassNames<typeof App> = {
7			classnames: {
8			"App__Item": "hash",
9			class1: "hash1",
10			class2: "hash2"
11			}
12			}
13
14			function App({classnames, className}: ClassNames<
15			true,
16			ClassNamesProperty<{App__Item: ClassHash}>,
17			typeof Component
18			>) {
19			return <Component {...{
20			...classNaming({
21			classnames, className
22			})(
23			true, {App__Item: true}
24			),
25			classnames
26			}}/>
27			}
28
29			function Component(props: ClassNames<true, ClassNamesProperty<{class1: ClassHash, class2: ClassHash}>>) {
30			const classes = classNaming(props)
31			return <>
32			<div {...classes(true, {class1: true, class2: false})}/>
33			<div {...classes({class2: true})}/>
34			</>
35			}
36
37			it("not propagate classnames", () => {
38			const App = ({classnames, className}: ClassNames<
39			true,
40			ClassNamesProperty<{App__Item: ClassHash}>,
41			typeof Component>
42			) =>
43			//@ts-expect-error Types of property classnames are incompatible Type undefined is not assignable
44			<Component {
45			...classNaming({
46			classnames, className
47			})(
48			true, {App__Item: true}
49			)}
50			/>
51
52			expectRender(
53			<App className="MyApp" classnames={classnames}/>
54			).toSame(
55			<div className="MyApp hash class1" />,
56			<div className="class2" />
57			)
58			})
59

askirmas / react-classnaming

index.miss-use.spec.tsx ➔ Component A last analyzed 2021-03-19 15:57 UTC

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like

index.miss-use.spec.tsx ➔ Component A
last analyzed 2021-03-19 15:57 UTC